<template>
  <KView class="payment-success">
    <KView class="payment-success-content" v-if="isShow">
      <KView class="payment-success-icon">
        <sys-svg name="wxPaysuccess" color="#41B035"></sys-svg>
      </KView>
      <KView class="payment-success-text">支付成功</KView>
      <KView class="payment-success-info">
        <KView class="payment-success-name">{{data.name}}</KView>
        <KView class="payment-success-price-div">
          <KView class="payment-success-price clearfix">
            <KView class="payment-success-price-unit">¥</KView>
            <KView class="payment-success-price-data">{{data.price}}</KView>
          </KView>
        </KView>
      </KView>
      <KView class="payment-success-adv" v-if="advertiseData!==null" @click="advClick">
        <img class="sys-img" :src="advertiseData.imgUrl" mode="aspectFit">
      </KView>
      <KView class="payment-success-btn" @click="btnClick">完成</KView>
    </KView>
  </KView>
</template>

<script>
  import Storage from 'storage';
  import SystemUtil from 'utils/systemUtil';

  import SysSvg from 'common/sysSvg';

  import GoodsPaymentApi from 'services/goodsPaymentApi';

  export default {
    data() {
      let data = Storage.getSession('payPage');
      return {
        data,
        isShow: false,
        isMiniprogram: process.env.isMiniprogram,
        advertiseData: null
      };
    },

    created() {
      if (this.isMiniprogram) {
        Storage.removeSession('payPage');
      }

      SystemUtil.showLoading();
      this.setAdvertiseData().then(() => {
        this.isShow = true;
        SystemUtil.hideLoading();
      }).catch(() => {
        SystemUtil.hideLoading();
      });
    },

    methods: {
      setAdvertiseData() {
        return GoodsPaymentApi.getAdvertise().then(advertiseData => {
          this.advertiseData = advertiseData;
          return advertiseData;
        });
      },

      advClick() {
        let advertiseData = this.advertiseData;
        let href = advertiseData.href;
        let url, flag = false;
        if (href.startsWith('http://') || href.startsWith('https://')) {
          url = `/htmlPage?url=${href}`;
        } else {
          url = href;
          if (href.startsWith('/goodsDetail') || href.startsWith('/shopMall')) {
            flag = true;
          }
        }

        if (this.isMiniprogram) {
          if (flag) {
            let pages = getCurrentPages();
            let page = pages[pages.length - 2];
            let pageName = page.window.pageName;
            if (['shopMall', 'goodsDetail'].indexOf(pageName) !== -1) {
              page.window.actionData = {
                type: 'toPage',
                data: {
                  url: url
                }
              };
              wx.navigateBack();
              return;
            }
          }
          this.$emit('to-page', url);
        }
      },

      btnClick() {
        if (this.isMiniprogram) {
          wx.navigateBack();
        }
      }
    },

    components: {
      SysSvg
    }
  };

</script>

<style lang="scss">
  .payment-success {
    height: calc(100% - #{formatPx(120)});
    padding: 0 formatPx(30);
    padding-top: formatPx(80);
    overflow: auto;

    .payment-success-content {
      overflow: auto;
    }

    .payment-success-icon {
      width: formatPx(100);
      height: formatPx(100);
      margin: auto;
    }

    .payment-success-text {
      margin-top: formatPx(26);
      font-size: formatPx(36);
      color: #41B035;
      text-align: center;
    }

    .payment-success-info {
      margin-top: formatPx(120);

      .payment-success-name {
        text-align: center;
        font-size: formatPx(36);
      }

      .payment-success-price-div {
        text-align: center;
        margin-top: formatPx(28);

        .payment-success-price {
          display: inline-block;

          >div {
            float: left;
          }

          .payment-success-price-unit {
            line-height: formatPx(72);
            font-size: formatPx(40);
          }

          .payment-success-price-data {
            font-size: formatPx(50);
            margin-left: formatPx(6);
            font-weight: bold;
          }
        }
      }
    }

    .payment-success-adv {
      margin-top: formatPx(80);
      height: formatPx(180);
    }

    .payment-success-btn {
      width: formatPx(580);
      height: formatPx(80);
      line-height: formatPx(80);
      text-align: center;
      color: #41B035;
      border: 1px solid #41B035;
      border-radius: 4px;
      font-size: formatPx(30);
      margin: auto;
      margin-top: formatPx(180);
    }
  }

</style>
